import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  // 自动保存至 localStorage 中
  plugins: [createPersistedState()],
  /**
   * isToken 用户登录状态
   * categories 总的分类和详细分类
   * data 用户记录的数据
   * collectData 用户目标数据
   * id 初始化每个数据的id
   * userInfo 用户数据
   */
  state: {
    categories: [
      {
        title: '支出',
        id: 1,
        data: [
          {
            id: 1,
            title: '餐饮',
            icon: '&#xe730;',
          },
          {
            id: 2,
            title: '购物',
            icon: '&#xe61c;',
          },
          {
            id: 3,
            title: '日用',
            icon: '&#xe602;',
          },
          {
            id: 4,
            title: '交通',
            icon: '&#xe619;',
          },
          {
            id: 5,
            title: '果蔬',
            icon: '&#xe628;',
          },
          {
            id: 6,
            title: '零食',
            icon: '&#xe612;',
          },
          {
            id: 7,
            title: '运动',
            icon: '&#xe616;',
          },
          {
            id: 8,
            title: '其他',
            icon: '&#xe63a;',
          },
        ],
      },
      {
        title: '收入',
        id: 2,
        data: [
          {
            id: 11,
            title: '工资',
            icon: '&#xe601;',
          },
          {
            id: 12,
            title: '兼职',
            icon: '&#xe604;',
          },
          {
            id: 13,
            title: '理财',
            icon: '&#xe61b;',
          },
          {
            id: 14,
            title: '生活费',
            icon: '&#xe678;',
          },
          {
            id: 15,
            title: '奖金',
            icon: '&#xe773;',
          },
          {
            id: 16,
            title: '报销',
            icon: '&#xe651;',
          },
          {
            id: 17,
            title: '零花钱',
            icon: '&#xe64c;',
          },
          {
            id: 18,
            title: '其他',
            icon: '&#xe63a;',
          },
        ],
      },
    ],
    id: 0,
    userInfo: [
      {
        nickname: 'zhangsan',
        username: 'zhangsan',
        password: 'zhangsan',
        data: [],
        collectData: [],
        imgUrl: '',
        des: 'zhangsan......',
      },
    ],
    username: '',
  },
  mutations: {
    // 添加数据至 data 的第 0 项
    handleAddData (state, payload) {
      // 将时间转为对应的字符串，方便比较时间的先后
      const dateString = payload.date.split('/').map(item => {
        if (item < 10) return '0' + item
        else return item
      }).join('')
      // 如果是支出，将金额改为负数
      if (payload.id < 10) payload.value = -payload.value
      state.id++
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      info.data.unshift({
        id: state.id,
        category: payload.category,
        date: payload.date,
        money: payload.value,
        message: payload.message,
        dateString,
      })
    },
    // 添加数据至 collectData
    handleAddCollectData (state, payload) {
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      state.id++
      info.collectData.push({
        id: state.id,
        date: payload.date,
        title: payload.title,
        schedule: 0,
        money: payload.money,
        message: payload.message,
      })
    },
    // 修改目标中的数据
    handleModifyCollectData (state, payload) {
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      const modifyData = info.collectData.filter(data => data.id === payload.id)[0]
      modifyData.date = payload.date
      modifyData.title = payload.title
      modifyData.schedule = payload.schedule
      modifyData.money = payload.money
      modifyData.message = payload.message
    },
    // 删除目标中的数据
    handleDeltetCollectData (state, payload) {
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      info.collectData = info.collectData.filter(data => data.id !== payload.id)
    },
    // 删除数据
    handleDeleteData (state, payload) {
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      // 删除当前 id 的数据
      info.data = info.data.filter(item => item.id !== payload.id)
    },
    // 修改数据
    handleModifyData (state, payload) {
      // 将时间转为对应的字符串，方便比较时间的先后
      const dateString = payload.date.split('/').map(item => {
        if (item < 10) return '0' + item
        else return item
      }).join('')
      // 如果是支出，将金额改为负数
      if (payload.typeId < 10) payload.value = -payload.value
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      const modifyData = info.data.filter(item => item.id === payload.id)[0]
      modifyData.id = payload.id
      modifyData.category = payload.category
      modifyData.date = payload.date
      modifyData.money = payload.value
      modifyData.message = payload.message
      modifyData.dateString = dateString
    },
    // 注册用户数据
    handleAddUserInfo (state, payload) {
      state.userInfo.push({
        ...payload,
        data: [],
        collectData: [],
      })
    },
    // 登录成功时
    handleuseInfo (state, payload) {
      state.username = payload.username
    },
    // 点击退出登录时
    handleQuit (state) {
      state.username = ''
    },
    // 修改用户信息
    handleEdit (state, payload) {
      // 获取当前账号的数据
      const info = state.userInfo.filter(user => user.username === state.username)[0]
      info.nickname = payload.nickname
      info.des = payload.des
      if (payload.imgUrl) {
        info.imgUrl = payload.imgUrl
      }
    },
  },
  actions: {
  },
  modules: {
  },
})
